<template>
  <div class="login">
    <div class="form">
      <img src="../assets/imgs/logo.png" class="weblogo" alt="">
      <p class="name">{{ appname }}</p>
      <div class="ipt">
         <input type="text" placeholder="用户名" v-model="userinfo.username" />
      </div>
      <div class="ipt">
          <input
            :type="pwdtype"
            placeholder="密码"
            v-model="userinfo.password"
            @blur="setpwdhide"
            ref="pwd"
            />
        <img v-if="showpwd" class="noeye icon_eye" @click="switchPwd" src="../assets/imgs/no_eye.png" alt="">
        <img v-else class="eye icon_eye" @click="switchPwd" src="../assets/imgs/eye.png" alt="">
      </div>
      
      <div class="submit" @click="userlogin">登录</div>
    </div>
  </div>
</template>

<script>
import {
  computed,
  defineComponent,
  onBeforeMount,
  reactive,
  ref
} from "@vue/runtime-core";
import { useStore } from "vuex";
import request from "../util/request.ts";
import {login} from '../api/index'
import { Toast } from "vant";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    let showpwd=ref(true);
    const router=useRouter();
    let userinfo=reactive({
        username:'',
        password:''
    })
    const pwd=ref(null);
    let pwdtype=computed(()=>showpwd.value?"password":"text");
    
    const store = useStore();
    const appname = computed(() => store.state.appName);
    onBeforeMount(() => {
      store.commit("changeFooter", false);
    });
    const switchPwd=()=>{
        //切换密码的显示与隐藏
        showpwd.value=!showpwd.value;
        pwd.value.focus();
    }
    const setpwdhide=()=>{
        showpwd.value=true;
    }
    const userlogin=()=>{
        if(!userinfo.username || !userinfo.password){
            Toast('请输入用户名或密码');
            return;
        }
        login({
            userName:userinfo.username,
            password:userinfo.password
        }).then(res=>{
            if(res.retCode=="200"){
                Toast(res.data);
                setTimeout(()=>{
                    router.push('/');
                },1000)
            }
        })
    }
    return {
      appname,
      showpwd,
      userinfo,
      switchPwd,
      pwdtype,
      setpwdhide,
      userlogin,
      pwd
    };
  },
});
</script>

<style lang="scss" scoped>
.weblogo{
  width:200px;
  height: auto;
  margin:0 auto 10px;
  display: block;
}

.login {
  width: 100%;
  height: 100vh;
  background: url("../assets/imgs/login_bg.jpeg") no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
}
.form {
  width: 680px;
  margin-top: 100px;
  .name {
    font-size: 20PX;
    color: #0ab1fe;
    text-align: center;
    margin: 0px auto 100px;
  }
}
.ipt {
  display: block;
  width: 100%;
  height: 80px;
  line-break: 80px;
  margin-bottom: 20px;
  border-radius: 10px;
  position: relative;
  input{
      width:100%;
      height: 100%;
      border-radius: 10px;
      padding: 10px;
      box-sizing: border-box;
  }
  .icon_eye{
      position: absolute;
      top:50%;
      right: 20px;
      transform: translateY(-50%);
      width:50px;
  }
}
::placeholder {
  font-size: 14PX;
  color: #666;
}
::-webkit-input-placeholder {
  font-size: 14PX;
  color: #666;
}
.submit {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16PX;
  background: #7380ff;
  border-radius: 10px;
  margin-top: 50px;
  color: #fff;
}
</style>>
